<template>
  <div class="spinner">
    <div class="rect1"></div>&nbsp;
    <div class="rect2"></div>&nbsp;
    <div class="rect3"></div>&nbsp;
    <div class="rect4"></div>&nbsp;
    <div class="rect5"></div>
  </div>
</template>

<script>
  export default {
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .spinner{
    font-size: 10px;

    width: 100px;
    height: 60px;
    margin: 100px auto;

    text-align: center;

    div{
      display: inline-block;

      width: 6px;
      height: 100%;
      vertical-align: bottom;

      background-color: #df2d2d;

      animation: stretchdelay 1.2s infinite ease-in-out;
    }

    .rect1{
      animation-delay: 0.8s
    }
    .rect2{
      animation-delay: 0.9s
    }

    .rect3{
      animation-delay: 1.0s
    }

    .rect4{
      animation-delay: 1.1s
    }

    .rect5{
      animation-delay: 1.2s
    }

    @keyframes stretchdelay {
      0%,40%,100%{ transform: scaleY(0.4) }
      20% { transform: scaleY(1.0); }
    }
  }
</style>
